<template>
  <CommonHead :title="basicInfo.name || '详情页'" />
  <div class="container">
    <!-- 轮播 -->
    <van-swipe class="detail-swiper" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- /轮播 -->
    <h4>{{ basicInfo.name }}</h4>
    <!-- 商品详情 -->
    <div class="content" v-html="content"></div>
  </div>
  <!-- 商品规格弹窗 -->
  <van-popup
    v-model:show="showPop"
    closeable
    round
    position="bottom"
    :style="{ height: '40%', padding: '20px' }"
  >
    <div class="sku-container">
      <van-card
        :num="sku.number"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.number" />
        </template>
      </van-card>
      <van-button type="danger" @click="clickConfirm" size="large" round>确定</van-button>
    </div>
  </van-popup>
  <!-- /商品规格弹窗 -->
  <!-- 商品规格行动栏 -->
  <van-action-bar>
    <van-action-bar-icon icon="wap-home-o" text="店铺" />
    <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
    <van-action-bar-button type="warning" @click="clickBtnShowPop(0)" text="加入购物车" />
    <van-action-bar-button type="danger" @click="clickBtnShowPop(1)" text="立即购买" />
  </van-action-bar>
  <!-- /商品规格行动栏 -->
</template>

<script setup lang="ts" name="DetailPage">
import { ref, onMounted } from "vue";
import CommonHead from "@/components/CommonHead.vue";
import { fetchItemDetail } from "@a/index";
import { useRoute } from "vue-router";
import type { Item } from "@/type";
const route = useRoute();
const basicInfo = ref<any>({});
// 商品规格
const sku = ref<any>({});
const pics = ref<any[]>([]);
const content = ref("");
const getItemDetail = () => {
  const id = route.query.id as string;
  fetchItemDetail(id).then((res) => {
    if (res.data.code === 0) {
      basicInfo.value = res.data.data.basicInfo;
      pics.value = res.data.data.pics;
      content.value = res.data.data.content.replace(
        /<img/gi,
        "<img style='display:block;width:100%'"
      );
      sku.value = {
        ...res.data.data.basicInfo,
        number: 1,
      };
    }
  });
};
onMounted(() => {
  getItemDetail();
});

// 商品规格弹窗
const showPop = ref(false);
const actionType = ref(0); // 0 点击购物车 1点击立即购买
// 点击按钮显示 弹窗
const clickBtnShowPop = (type: number) => {
  actionType.value = type;
  showPop.value = true;
};
// 点击商品规格弹窗确定按钮
const clickConfirm = () => {
  if (actionType.value === 0) {
    alert("加入购物车");
  } else {
    alert("立即购买");
  }
  showPop.value = false;
};
</script>

<style scoped lang="scss">
.container {
  padding-top: 46px;
  padding-bottom: 50px;
  .detail-swiper {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
  /*  .content {
    :deep img {
      display: block;
      width: 100%;
    }
  } */
}
</style>
